<template>
  <div>
	  <myheader></myheader>

	<section class="featured-block text-center">
		<div class="container">
      <div>
        <breadcrumb :datas="datas"></breadcrumb>
      </div>

      <table>
        <tr>
          <td>用户名</td>
          <input type="text" v-model="username" placeholder="请输入用户名">
        </tr>
        <tr>
          <td>用户密码</td>
          <input type="password" v-model="password" >
        </tr>
        <tr>
          <td>验证码</td>
          <td>
          <input type="text" v-model="code">
          </td>
          <img class="imgcode" :src="src"  alt="点击刷新" @click="changecode">
        </tr>
        <tr>
          <td>
          <!-- 滑块验证码 -->
          <drag-verify
            :width="width"
            :height="height"
            :text="text"
            ref="Verify">
          </drag-verify>
          </td>
        </tr>
        <tr>
          <td></td>
          <Button color="blue" @click="submit">提交</Button>
        </tr>
        <img @click="sina" class="imgcode" src="http://127.0.0.1:8000/static/sina.png">
      </table>
			

		</div>
	</section>
	

	
	
	
	<footer class="footer">

		<div class="container">
			@v3u.cn
		</div>
		
		
	</footer>
    
</div>
  
</template>


 
<script>
//导入组件
import myheader from './myheader.vue'
//导入滑块验证码
import dragVerify from 'vue-drag-verify'

export default {
  data () {
    return {
      //声明滑块验证码数据
      width:320,
      height:42,
      text:'请将滑块拖动',
      msg: "这是一个变量",
      //面包屑导航变量
      datas:[{title:'首页',route:{name:'index'}},{title:'登录页面'}],
      //表单数据
      username:'',
      password:'',
      //验证码
      code:'',
      //图片地址
      src:'http://127.0.0.1:8000/code/'

    }
  },
  components: {
    'myheader':myheader,
    'dragVerify':dragVerify
  },
  methods: {
    //新浪微博三方登录
    sina(){
      //跳转
      window.location.href ="https://api.weibo.com/oauth2/authorize?client_id=1721358960&redirect_uri=http://127.0.0.1:8000/md_admin/weibo";

    },
    //点击验证码图片，重新刷新验证码
    changecode(){
      //生成随机数
      let num = Math.ceil(Math.random()*10);
      //进行传参
      this.src = this.src + "?num=" + num;

    },
    //定义提交事件
    submit(){
      //判断是否拖动
      console.log(this.$refs.Verify.isPassing)
      if(this.$refs.Verify.isPassing==false){
        alert('请拖动验证码')
      }
      //非空验证
      if(this.username==''){
        this.$Message('您没用输入用户名')
        return false
      }
      //请求后台接口
      this.axios.get('http://127.0.0.1:8000/login/',{params:{username:this.username,password:this.password,phone:this.phone,code:this.code}})
      .then(res=>{
      console.log(res)
      //判断验证码是否正确
      if(res.data.code==200){
      //登录成功
      localStorage.setItem('username',res.data.username)
      localStorage.setItem('uid',res.data.uid)
      localStorage.setItem('jwt',res.data.jwt)

      //跳转页面
      this.$router.push('/')

      }else{
              this.$Message(res.data.message)
              //如果验证码输入错误，重新调用验证码函数，刷新验证码
              // this. changecode()
      }
      })
      
     
    }


  },
 
}


</script>
 
<style>
/* //标签选择器 */
td{
  padding: 10px
}
/* 鼠标变成小手图标样式操作 */
.imgcode{
  cursor: pointer;
}


</style>